<template>
	<view class="page" :style="{'background':backgroundcolor}">
		<hx-navbar title=" " @bindBack="bindReturnIcon" :fixed="true" bar-placeholder="hidden" transparent="hidden" color="#ffffff" :showLoading="showNavigationBarLoading" />
		<image class="lan_bg" :src="backgroundimage"></image>
		<view class="box" :style="{'background':iconcolor}">
			<view class="question_item" :style="{borderColor:color}">
				<view class="question_top">
					<text class="question_index">{{ questionIndex + 1 }}</text>
					<text class="question_len">/{{ questionList.length }}.</text>
					<text class="question_title f_5">{{ questionList[questionIndex].title }}{{questionList[questionIndex].input=='radio'?'(单选）':questionList[questionIndex].input=='checkbox'?'(多选)':''}}</text>
				</view>
				<view class="question_center" :class="{ question_center_textarea: questionList[questionIndex].input == 'text' }">
					<block v-if="questionList[questionIndex].input != 'text'">
						<scroll-view scroll-y="true" class="scroll_view">
							<view>
								<view @tap="selectLable(index)" v-for="(item, index) in questionList[questionIndex].question_bank" :key="index" class="question_lable">
									<text class="question_answer">{{ item.content }}</text>
									<view class="question_select" :style="{borderColor:item.select?color:'#e5e5e5'}">
										<text class="" :style="{'background':item.select?color:''}"></text>
									</view>
								</view>
							</view>
						</scroll-view>
					</block>
					<textarea v-else class="question_textarea" placeholder-class="question_placeholder" v-model="questionList[questionIndex].value" placeholder="请输入你的要求…" />
				</view>
				<view class="question_bottom">
					<!-- <view class="question_agree">
						<text class="question_agree_text">发布需求既表示你同意</text>
						<text class="question_agree_text_select" @tap="bindChangePage">《可语welltalk服务条款》</text>
					</view> -->
					<view class="btn_list">
						<view :class="['btn_pre']" :style="{'color':color}" @tap="changeQuestionIndex(-1)">上一题</view>
						<view :class="['btn_next']" :style="{'background':color}" @tap="changeQuestionIndex(1)">
							{{ questionList.length - 1 == questionIndex ? result!=''?'确认修改':'完 成' : '下一题' }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { toPage } from '@/static/uitls/common.js';
import API from '@/static/api/index.js';
const app = getApp();
export default {
	data() {
		return {
			result:'',//问券修改时，后台返回的值。从上一个页面传过来。如果这个值不为空，就在请求的时候把值赋上去。
			need_id:'',//修改的时候需要用到，也是从上个页面传过来的
			title:'',
			showNavigationBarLoading: true,
			language_id:'',
			backgroundimage:'',
			backgroundcolor:'',
			color:'',
			iconcolor:'',
			scrollData: {},
			questionIndex: 0,
			questionList: [
				//input ['radio','checkbox'.!!选择放在选项的select],['textarea'.!!内容放在value]
				// {
				// 	title: '现就读的阶段学校是？',
				// 	question_bank: [
				// 		{ content: '幼稚园', select: false },
				// 		{ content: '小学', select: false },
				// 		{ content: '初中', select: true },
				// 		{ content: '高中', select: false },
				// 		{ content: '大学', select: false },
				// 		{ content: '兴趣', select: false }
				// 	],
				// 	input: 'checkbox',
				// 	limit: 2
				// },
				// {
				// 	title: '你期望的课堂形式是？',
				// 	question_bank: [{ content: '教师上门', select: false }, { content: '学生上门', select: false }, { content: '其他', select: false }],
				// 	input: 'radio',
				// 	limit: 1
				// },
				// {
				// 	title: '你预期的补习预算范围是多少？（￥/每小时）',
				// 	question_bank: [
				// 		{ content: '￥100~¥150', select: false },
				// 		{ content: '￥150~¥200', select: false },
				// 		{ content: '￥200~¥250', select: false },
				// 		{ content: '￥250~¥300', select: false },
				// 		{ content: '￥350~￥400', select: false },
				// 		{ content: '￥450~¥500', select: false }
				// 	],
				// 	input: 'radio',
				// 	limit: 1
				// },
				// {
				// 	title: '你对老师有什么要求吗？(如无可略过)',
				// 	placeholder: '请输入你的要求…',
				// 	value: '',
				// 	input: 'text',
				// 	limit: 1
				// }
			]
		};
	},
	onLoad(option) {
		console.log("option,,,",option)
		this.language_id=decodeURIComponent(option.language_id)
		this.backgroundimage=decodeURIComponent(option.backgroundimage)
		this.backgroundcolor=decodeURIComponent(option.backgroundcolor)
		this.color=decodeURIComponent(option.color)
		this.iconcolor=decodeURIComponent(option.iconcolor)
		this.title=decodeURIComponent(option.title)
		console.log(option.result)
		if(option.result!='' && option.result!=undefined){
			this.result=JSON.parse(decodeURIComponent(option.result))
			this.need_id=decodeURIComponent(option.need_id)
		}
		this._getQuestion()
	},
	onShow() {
		setTimeout(() => {
			this.showNavigationBarLoading = false;
		}, 1000);
	},
	methods: {
		bindReturnIcon(){
			let {questionList,questionIndex} = this
			if(questionList.length>0){
				let count=questionIndex;
				console.log("count,,",count)
				let {input,value,question_bank}=questionList[questionIndex]
				if(input=='text'){
					count+=value!=''?1:0
				}else{
					if(question_bank.filter(o=>o.select==true).length>=1){
					count+=1
					}
				}
				if(questionList.length-count>0){
					this._showModal("您还有"+(questionList.length-count)+"/"+questionList.length+"就可以完成需求问卷了，继续完成吗？")
				}else{
					this._showModal("您已完成需求问卷了，但未保存，继续完成吗？")
				}
			}else{
				uni.navigateBack();
			}
		},
		_showModal(content){
			uni.showModal({
			    title: '真的要离开吗？',
			    content: content,
				cancelText:'残忍离开',
				confirmText:'继续填写',
			    success: function (res) {
			        if (res.confirm) {
			            console.log('用户点击确定');
			        } else if (res.cancel) {
						uni.navigateBack();
			        }
			    }
			});
		},
		_getQuestion(){
			API.getQuestion(this.language_id).then(({code,data,msg})=>{
				console.log("code",code,data,msg)
				if(code==1){
					for (let i = 0; i < data.question.length; i++) {
						// 设置默认值
						if(data.question[i].input=="radio"){
							data.question[i].limit=1
						}else if(data.question[i].input=="text"){
							data.question[i].value=''
							// data.question[i].limit=1
						}else{
							data.question[i].limit=2
						}
						
						for (var k = 0; k < data.question[i].question_bank.length; k++) {
							data.question[i].question_bank[k].select=false
							//单选多选，value回显
							if(this.result){
								for(var key in this.result){
									console.log(data.question[i].input)
									if(data.question[i].question_id==key){
										if(data.question[i].input=='radio'){
											if(data.question[i].question_bank[k].question_bank_id==this.result[key][0]){
												data.question[i].question_bank[k].select=true
											}
										}else if(data.question[i].input=='checkbox'){
											for (var x = 0; x < this.result[key].length; x++) {
												if(data.question[i].question_bank[k].question_bank_id==this.result[key][x]){
													data.question[i].question_bank[k].select=true
												}
											}
										}else if(data.question[i].input=='text'){
											data.question[i].value=this.result[key][0]
										}
									}
								}
							}
						}
						//input回显
						if(this.result){
							for(var key in this.result){
								console.log(data.question[i].input)
								if(data.question[i].question_id==key){
									if(data.question[i].input=='text'){
										data.question[i].value=this.result[key][0]
									}
								}
							}
						}
						
						
					}
					this.questionList=data.question
				}
			}).catch(err=>{
				app._log(err);
			})
		},
		bindChangePage() {
			toPage('/pages/view/index', {}, 3).then(res => {
					app._log(res);
				}).catch(err => {
					app._log(err);
				});
		},
		// select选择
		selectLable(index) {
			let { questionIndex, questionList } = this;
			let { input, limit, question_bank } = questionList[questionIndex];
			let { select } = questionList[questionIndex].question_bank[index];
			if (select) {
				// 取消选择的直接取消
				this.questionList[questionIndex].question_bank[index].select = false;
			} else {
				if (input == 'radio') {
					// 单选的
					let oldIndex = question_bank.findIndex(o => o.select == true);
					app._log(oldIndex);
					if (oldIndex >= 0) {
						// 找到之前选择过的下标，取消选择
						this.questionList[questionIndex].question_bank[oldIndex].select = false;
					}
					this.questionList[questionIndex].question_bank[index].select = !select;
				} else {
					// 多选的
					let arr = question_bank.filter(o => o.select == true);
					if (arr.length < limit&&limit==1) {
						// 还可以选择
						this.questionList[questionIndex].question_bank[index].select = !select;
					} else {
						// 已经超过可选数了
						this.questionList[questionIndex].question_bank[index].select = !select;
					}
				}
			}
		},
		//选择上下题
		changeQuestionIndex(num) {
			let { questionIndex, questionList } = this;
			if (num == -1) {
				if (questionIndex >= 1) {
					this.questionIndex -= 1;
				} else {
					this.questionIndex = 0;
				}
			} else {
				let { input, question_bank, value, limit } = questionList[questionIndex];
				let title = '';
				if (limit > 0) {
					// 必填时做判断
					if (input == 'text') {
						if (value == '') {
							title = '不能为空';
						}
					} else {
						let index = question_bank.findIndex(o => o.select == true);
						if (index == -1) {
							title = '请选择';
						}
					}
				}
				if (title != '') {
					this.showToast(title);
				} else if (questionList.length - 1 > questionIndex) {
					this.questionIndex += 1;
				} else {
					console.log("questionList,,,",questionList)
					let parentObj={}
					for (let i = 0; i < questionList.length; i++) {
						let array=[]
						if(questionList[i].input=='text'){
							array.push(questionList[i].value)
							parentObj[questionList[i].question_id]=array
							console.log("array----------",array)
						}else{
							for (let j = 0; j < questionList[i].question_bank.length; j++) {
								if(questionList[i].question_bank[j].select){
									array.push(questionList[i].question_bank[j].question_bank_id)
									parentObj[questionList[i].question_bank[j].question_id]=array
								}
							}
						}
					}
					let obj={
						language_id:this.language_id,
						title:parentObj
					}
					//如果是修改
					if(this.result!=''){
						obj.need_id=this.need_id
						API.editQuestion(obj).then(res=>{
							if(res.code==1){
								this.showToast('修改成功','success');
								setTimeout(() => {
									toPage('/pages/search_from/index',{value:this.title},'redirect')
								}, 2000);
							}else{
								this.showToast(res.msg);
							}
						})
					}else{//否则就是完成
						API.create(obj).then(res=>{
							if(res.code==1){
								this.showToast('交卷成功','success');
								setTimeout(() => {
									toPage('/pages/search_from/index',{value:this.title},'redirect')
								}, 2000);
							}else{
								this.showToast(res.msg);
							}
						})
					}
				}
			}
		}
	}
};
</script>

<style lang="scss">
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
.page {
	padding-bottom: 198rpx;
	&.lan_ {
		&korean {
			//韩语
			background-image: linear-gradient(0deg, #b9bdff 0%, #e3e5ff 100%);
			.question_item {
				border-color: #b9bdff;
			}
		}
		&japanese {
			// 日语
			background-image: linear-gradient(0deg, #fad5ea 0%, #9ed2fe 100%);
			.question_item {
				border-color: #c1e3ff;
			}
		}
		&english {
			// 英语
			background-image: linear-gradient(0deg, #ffc389 0%, #ffffd8 100%);
			.question_item {
				border-color: #ffc389;
			}
		}
		&vietnamese {
			// 越南语
			background-image: linear-gradient(0deg, #6abc60 0%, #008368 100%);
			.question_item {
				border-color: #088767;
			}
		}
		&arabic {
			// 阿拉伯语
			background-image: linear-gradient(0deg, #020033 0%, #003679 100%);
			.question_item {
				border-color: #010033;
			}
		}
		&german {
			// 德语
			background-image: linear-gradient(0deg, #94d2b4 0%, #1e9481 100%);
			.question_item {
				border-color: #219582;
			}
		}
		&italian {
			// 意大利语
			background-image: linear-gradient(0deg, #37c4d1 0%, #034f72 100%);
			.question_item {
				border-color: #1db1c6;
			}
		}
	}
	.lan_bg {
		width: 750rpx;
		height: 600rpx;
	}
}
.box{
	width: 654rpx;
	height: 888rpx;
	position: relative;
	border-radius: 32rpx;
	margin-top: -72rpx;
	margin-left: 48rpx;
}
.question_ {
	&item {
		width: 654rpx;
		height: 882rpx;
		background-color: #ffffff;
		border-radius: 32rpx;
		padding: 40rpx;
		box-sizing: border-box;
		margin-top: -72rpx;
		// margin-left: 48rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 10;
		// border: 4rpx solid;
		border: solid 4rpx;
	}
	&top {
		color: #1f2633;
		font-size: 28rpx;
		margin-bottom: 24rpx;
	}
	&index {
		font-size: 36rpx;
	}
	&len {
	}
	&title {
	}
	&center {
		font-size: 28rpx;
		flex: 1;
		margin-bottom: 48rpx;
		.scroll_view {
			max-height: 600rpx;
		}
		&_textarea {
			background-color: #fafafa;
			padding: 16rpx;
			height: 500rpx;
			overflow: hidden;
			.question_textarea {
				width: 100%;
				height: 100%;
			}
			.question_placeholder {
				color: #999999;
			}
		}
	}
	&lable {
		font-size: 28rpx;
		height: 88rpx;
		color: rgba(31, 38, 51, 0.7);
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid rgb(237,237,237);
	}
	&answer {
		color: rgba(31, 38, 51, 0.7);
	}
	&select {
		width: 44rpx;
		height: 44rpx;
		background-color: #ffffff;
		border: solid 3rpx ;
		position: relative;
		border-radius: 50%;
		transition: 0.2s;
		box-sizing: border-box;
		padding: 8rpx;
		&.lan_ {
			&korean {
				//韩语
				border-color: #835ec3;
				&::before {
					background-color: #7745b1;
					box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(119, 69, 177, 0.3);
				}
			}
			&japanese {
				// 日语
				border-color: #d35fa1;
				&::before {
					background-color: #e26694;
					box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(241, 147, 201, 0.3);
				}
			}
			&english {
				// 英语
				border-color: #b28053;
				&::before {
					background-color: #e59f62;
					box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(229, 159, 98, 0.3);
				}
			}
			&vietnamese {
				// 越南语
				border-color: #5fb660;
				&::before {
					background-color: #158e66;
					box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 43, 106, 0.3);
				}
			}
			&arabic {
				// 阿拉伯语
				border-color: #093885;
				&::before {
					background-color: #002b6a;
					box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 43, 106, 0.3);
				}
			}
			&german {
				// 德语
				border-color: #63b89e;
				&::before {
					background-color: #37a18b;
					box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(43, 155, 134, 0.3);
				}
			}
			&italian {
				// 意大利语
				border-color: #63b89e;
				&::before {
					background-color: #37a18b;
					box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(43, 155, 134, 0.3);
				}
			}
		}
		&::before {
			// margin: 8rpx;
			content: '';
			display: block;
			width: 28rpx;
			height: 28rpx;
			border-radius: 50%;
			position: relative;
		}
		text{
			position: absolute;
			width: 14px;
			height: 14px;
			border-radius: 50%;
			top: 50%;
			margin-top: -7px;
			left: 50%;
			margin-left: -7px;

		}
	}

	&bottom {
		.btn_ {
			&list {
				display: flex;
				justify-content: space-between;
				margin-top: 24rpx;
			}
			&pre,
			&next {
				width: 294rpx;
				line-height: 92rpx;
				border-radius: 24rpx;
				text-align: center;
				margin-left: 16rpx;
			}
			&pre {
				opacity: 0.6;
				background-color: #f0f0f6;
				&.lan_ {
					&korean {
						//韩语
						color: #7a4ab5;
						background-color: #e6e6f0;
					}
					&japanese {
						// 日语
						color: #e26795;
						background-color: #e6e6f0;
					}
					&english {
						// 英语
						color: #e7a96e;
					}
					&vietnamese {
						// 越南语
						color: #1c9266;
					}
					&arabic {
						// 阿拉伯语
						color: #053174;
					}
					&german {
						// 德语
						color: #37a18b;
					}
					&italian {
						// 意大利语
						color: #37a18b;
					}
				}
			}
			&next {
				color: #ffffff;
				&.lan_ {
					&korean {
						//韩语
						background-image: linear-gradient(270deg, #7744b0 0%, #896bce 100%);
					}
					&japanese {
						// 日语
						background-image: linear-gradient(270deg, #db6496 0%, #f46d92 100%);
					}
					&english {
						// 英语
						background-image: linear-gradient(270deg, #e59f62 0%, #ecc38e 100%);
					}
					&vietnamese {
						// 越南语
						background-image: linear-gradient(270deg, #008368 0%, #6abc60 100%);
					}
					&arabic {
						// 阿拉伯语
						background-image: linear-gradient(270deg, #002969 0%, #1e5ba8 100%);
					}
					&german {
						// 德语
						background-image: linear-gradient(270deg, #249783 0%, #72c0a5 100%);
					}
					&italian {
						// 意大利语
						background-image: linear-gradient(270deg, #249783 0%, #72c0a5 100%);
					}
				}
			}
		}
	}
	&agree {
		text-align: center;
		font-size: 22rpx;
		line-height: 32rpx;
	}
	&agree_text {
		color: #999999;
	}
	&agree_text_select {
		color: #1f2633;
	}
}
</style>
